<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //JS  es5     es6 函数    版本


        //es5 函数
        //定在在全局的函数，会自动作为window对象中的键值对
        var fun11 = function () {   //匿名函数
            console.log(this)
        }
        function fun22() {   //有名函数
            console.log(this)
        }
        fun11()
        fun22()

        //window已经是浏览器中最大的一个对象了，所以它里边的键值对可以直接使用，不需要加window前缀

        console.log(window)

        //es6  箭头函数
        var fun3 = () => {
            console.log(this)
        }
        fun3()


        console.log(this) //window


        var obj222 = {
            name: "lucy",
            print: () => {
                console.log(this)
            }
        }
        obj222.print()

        var obj333 = {
            name: "eric",
            print1() {
                //this->obj333
                var print2 = () => {
                    console.log(this)  //obj333
                }
                print2()
            }
        }
        obj333.print1()

        //es6函数里边的this，指向函数执行位置的环境/上下文
        //es5函数中的this，指向调用这个函数的对象
        var obj1 = {
            print: function () {
                console.log(this)
            }
        }
        obj1.print()



        //题目1
        // var foo = 123;  //window.foo = 123
        // function print() {
        //     this.foo = 234;  //window.foo = 234
        //     console.log(this);  //window
        //     console.log(foo); //234
        // }
        // print(); //this->window

        //题目2
        // var a = 1;  //window.a = 1
        // function foo() {  //window.foo = f
        //     //window
        //     console.log(this.a);
        // }
        // var obj = {  //window.obj = {}
        //     a: 10,
        //     bar() {
        //         //this->obj
        //         foo();  //window.foo
        //     }
        // }
        // obj.bar()

        //题目3
        var obj = {
            name: 'edward',
            func: function () {
                var that = this;  //this->obj   that->obj
                console.log(this.name);  //obj.name  edward
                console.log(that.name);  //edward
                (function () {
                    console.log(this)  //window
                    console.log(this.iiii)  //undefined
                    console.log(that.name) //edward
                })()
            }
        }
        obj.func()





        //题目4
        var name = 'Javascript';  //window.name = js
        function demo() {
            var name = 'CSS';
            var other = {
                name: 'HTML',
                fn: () => {
                    var name = 'Vue';
                    console.log(this.name)
                }
            }
            return other
        }
        demo().fn()







    </script>
</body>

</html>